<!DOCTYPE html>
<html lang="en">
<head>
    <#include '../../public/head.ftl'>
    <title>图片在线转换base64</title>
    <meta name="keywords" content="图片在线转换,图片在线转换base64,base64转图片"/>
    <meta name="description" content="在线把图片转换成Base64"/>
    <link href="/static/tool/css/tool.css" rel="stylesheet">
</head>
<body>
<#include '../../public/header.ftl'>
<div style="height: 80px"></div>

<div class="lz-width-1200 lz-margin-auto lz-padding-30 lz-bg-white">
    <ol class="breadcrumb">
        <li><a href="/tool/index.html">工具箱</a></li>
        <li class="active">图片在线转换base64</li>
    </ol>

    <div>
        <div class="page-header">
            <h1>图片在线转换base64</h1>
        </div>
        <div class="lz-flex lz-justify-between lz-padding-bottom-30">
            <div>
                <div class="input-file btn btn-primary">
                    <input accept="image/*" name="upimage" id="upload_file" type="file" value="选择图片">
                    &nbsp;选择图片 </div>
                <div class="span" id="update_file_label"></div>
            </div>
            <div>
                <input onclick="copyUrl2()" value="复制" name="res7" class="btn btn-info" type="button">
                <input onclick="clearInput()" value="清空" name="res7" class="btn btn-danger lz-margin-left-30" type="button">
            </div>
        </div>
        <div class="lz-padding-bottom-30">
            <textarea id="base64_output" name="Word" style=" width:100%;" class="form-control" rows="10"></textarea>
        </div>

        <div class="lz-padding-bottom-30">
            <div>
                <div class="btn btn-danger" onclick="test_base64();">Base64编码转为图片</div>
            </div>
            <div class="lz-padding-bottom-30">
                <div class="strong red" id="img_size"> </div>
            </div>
            <div style="width: 500px">
                <img id="img_prev" class="img-rounded" src="" style="max-width:100%;border: 1px solid gray;" data-bd-imgshare-binded="1">
            </div>
        </div>



        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">base64图片工具介绍：</h3>
            </div>
            <div class="panel-body">
                <p>1.支持 PNG、GIF、JPG、BMP、ICO 格式。 </p>
                <p>2.将图片转换为Base64编码，可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是极为方便的，因为你不需要再去寻找一个保存图片的地方。</p>
                <p>3.假定生成的代码为"data:image/jpeg;base64, ....."，那么你只需要全部复制，然后在插入图片的时候，地址填写这段代码即可。</p>
                <p>4.CSS中使用：background-image: url("...");</p>
                <p>5.HTML中使用：&lt;img src="..." /&gt;</p>
                <p>6.图片转换Base64，无线开发、HTML5、CSS3必备的工具，CSS DataURI Base64 工具。</p>
                <p>7.将图片转换成base64编码的，在web网上一般用于小图片上，不仅可以减少图片的请求数量（集合到js、css代码中），还可以防止因为一些相对路径等问题导致图片404错误。</p>
            </div>
        </div>


        <div>

        </div>
    </div>

</div>
<script>


    function async_load(url){
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = url;
        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
    }
    function aysnc_load_js(url) {
        if (window.attachEvent)
            window.attachEvent('onload', function() {async_load(url)});
        else
            window.addEventListener('load', function() {async_load(url)}, false);
    }

    function async_do_func(func) {
        if (window.attachEvent)
            window.attachEvent('onload', func);
        else
            window.addEventListener('load', func, false);
    }

    function copyUrl2(){
        var Url2=document.getElementById("base64_output");
        var val=Url2.value;
        if(val==''){
            alert('没有要复制的内容！');
            return false;
        }
        Url2.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        alert("已复制好，可贴粘。");
    }
    function $_(id) {
        return document.getElementById(id);
    }
    function gen_base64() {
        $_('base64_output').value = '';
        $_('img_size').innerHTML = '';
        $_('img_prev').src = '';
        var file = $_('upload_file').files[0];
        if(!/image\/\w+/.test(file.type)){
            alert("请确保文件为图像类型");
            return false;
        }
        r = new FileReader();  //本地预览
        r.onload = function(){
            $_('base64_output').value = r.result;
            $_('img_size').innerHTML = "    图片大小：" + Math.round(r.result.length/1024*1000)/1000 + " KB";
        }
        r.readAsDataURL(file);    //Base64
    }
    function test_base64() {
        $_('img_prev').src = '';
        //$_('img_prev').src = 'data:image/jpeg;base64,'+$_('base64_output').value;
        document.getElementById('img_prev').setAttribute( 'src', $_('base64_output').value);
    }
    window.onload = function() {
        if ( typeof(FileReader) === 'undefined' ){
            alert("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！");
            $_('upload_file').disabled = true;
        }
    }

    document.getElementById("upload_file").onchange = function () {
        document.getElementById("update_file_label").innerHTML = this.value;
        gen_base64();
    };
    function clearInput() {
        $_('base64_output').value = '';
        $_('img_size').innerHTML = '';
        $_('img_prev').src = '';
        document.getElementById("update_file_label").innerHTML = "";
    }

</script>
<style>
    .input-file{overflow: hidden;position: relative;}
    .input-file input{cursor: pointer; font-size: 100px; opacity: 0; position: absolute; right: 0; top: 0; background:none; border:none}
</style>
</body>
</html>